<template>
  <div class="register">
    <template>
      <div class="register-wrap">
        <el-form class="login-container" :model="form" :rules="rules">
          <h1 class="title">注册系统</h1>
          <el-form-item label="请输入账号:" prop="form">
            <el-input type="text" v-model="form.user" placeholder="登录账号" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="请输入密码:" prop="form">
            <el-input show-password v-model="form.password" placeholder="登录密码" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" style="width:100%;" @click="submit">注册</el-button>
          </el-form-item>
          <el-row style="text-align: center;margin-top:-10px">
            <el-link type="primary" @click="$router.push('/login')">用户登录</el-link>
          </el-row>
        </el-form>
      </div>
    </template>

  </div>
</template>
<script>
import axios from "axios";
import qs from 'qs';

export default {
  name: 'register', // 组件的名称

  data() {
    return {
      form: {
        user: '', // 用户名
        password: '' // 密码
      },
      rules: {
        user: [
          { required: true, trigger: 'blur', message: '请输入账号' }
        ],
        password: [
          { required: true, trigger: 'blur', message: '请输入密码' }
        ]
      }
    };
  },

  methods: {
    // 注册方法
    submit() {
    let url = 'http://66955b3b.r15.cpolar.top/employee/register/'

      // 使用axios进行POST请求，发送用户输入的用户名和密码
      axios.post(url, qs.stringify({
        account: this.form.user,
        password: this.form.password
      }), {
        headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8' }
      })
      .then(resp => {
        // 处理注册响应
        if (resp.data.code === 200) {
          this.$message.success('注册成功!')
          this.$router.push('/login')
          // localStorage.setItem("token", resp.data.data);
          // this.$router.push('/home');
        } else {
          // 注册失败，显示错误信息
        this.$message.error('注册失败!');
        }
      })
      .catch(error => {
        console.error('注册请求失败', error);
      });
    }
  }
};
</script>


<style scoped>
  .register-wrap {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 10%;
    background-repeat: no-repeat;
    background-position: center right;
    background-size: 100%;
  }

  .login-container {
    border-radius: 10px;
    margin: 0px auto;
    width: 350px;
    padding: 30px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    text-align: left;
    box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
  }

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
</style>